HTML基础标签

HTML标签正常成对出现，不同的标签有不同的功能，同时不同的标签也具有不同的语义，比如<h1>标签和<P>标签，另外HTML中还有一些单个出现的标签，我们称之为单标签，在HTML4中单标签以/结尾，比如<br/>，到了HTML5时代可以将/省略，直接写成<br>。本专题内容仅会对网页中常用的基础标签，以及他们常用的属性进行讲解，如想了解更详细的内容可以访问：W3school

一、标题和段落

1. 标题标签

搜索引擎非常看重标题标签的内容，所以我们要讲重要的内容放在标签标签中，<h1> 标题标签一般只能放一个，否则会被搜索引擎视为作弊

<!-- 请复制以下代码，在浏览器运行查看效果 -->
<h1>标题1</h1>
<h2>标题1</h2>
<h3>标题1</h3>
<h4>标题1</h4>
<h5>标题1</h5>
<h6>标题1</h6>

2. 段落标签

段落标签可以让文本换行，但是段落标签中不能嵌套标题和段落标签

<!-- 请复制以下代码，在浏览器运行查看效果 -->
<p>与其他的牛鬼蛇神相比，反动学术权威有他们的特点：当打击最初到来时，他们的表现往往是高傲而顽固的，这也是他们伤亡率最高的阶段；在首都，四十天的时间里就有一千七百多名批斗对象被活活打死，更多的人选择了更快捷的路径来逃避疯狂，老舍、吴晗、葛伯赞、傅雷、赵九章、以群、闻捷、海默等，都自己结束了他们那曾经让人肃然起敬的生命。</p>
<p>从这一阶段幸存下来的人，在持续的残酷打击下渐渐麻木，这是一种自我保护的精神外壳，使他们避免最后的崩溃。他们在批斗会上常常进入半睡眠状态，只有一声恫吓才能使其惊醒过来，机械地重复那已说过无数遍的认罪词；然后，他们中的一部分人便进入了第三阶段，旷日持久的批判将鲜明的政治图像如水银般注入了他们的意识，将他们那由知识和理性构筑的思想大厦彻底摧毁，他们真的相信自己有罪，真的看到了自己对伟大事业构成的损害，并为此痛哭流涕，他们的忏悔往往比那此非知识分子的牛鬼蛇神要深刻得多，也真诚得多；而对于红卫兵来说，进入后两个阶段的批判对象是最乏味的，只有处于第一阶段的牛鬼蛇神才能对他们那早已过度兴奋的神经产生有效的刺激，如同斗牛士手上的红布，但这样的对象越来越少了，在这所大学中可能只剩下一个，他由于自己的珍稀而被留到批判大会最后出场。</p>

二、div标签

div的英语是division(分割)的缩写，将想关联的内容和其他内容分割，使文档结构更清晰

三、多媒体与语义化标签

1. 图片标签

• src：（必填）图片链接地址，支持相对路径和绝对路径
• width：图片宽度
• height： 图片高度
• alt：当图片无法访问时展示内容

<!-- 请复制以下代码，在浏览器运行查看效果 -->
<img src="" width="80" height="80" alt="我的头像">

2. 超级链接

• href：（必填）跳转体质
• title：鼠标悬浮时的标题
• target：跳转方式
  • _self：（默认）访问地址在当前页面打开
  • _blank：访问地址在新页面显示
  • three：访问地址在对应窗口显示
  • _top：在当前窗体打开链接，并替换当前的整个窗体(框架页)，清除所有包含的框架
  • _parent：在父窗体中打开链接，在窗口与顶级框架中，等同于_self

<!-- 请复制以下代码，在浏览器运行查看效果 -->
<a href="https://www.baidu.com" title="鼠标悬浮时的标题" target="_blank">跳转到百度</a>

<!-- a标签实现锚点 -->
<a href="#menu1">锚点目录1</a> 
<a href="#mulu2">锚点目录2</a> 

<h2><a name="menu1">锚点对应目录1内容</a></h2>
<h2 id="mulu2">锚点对应目录2内容</h2>

<!-- a标签实现实现邮件和打电话 -->
<a href="mailto:991107056@qq.com">给老师发邮件</a> 
<a href="tel:18888888888">给老师打电话</a>

三、音频和视频标签

1. 音频标签

在网页中插入音频需要使用audio标签，兼容到IE9

• src：（必填）音频地址，常用音频格式mp3、ogg
• controls：是否显示控制按钮
• loop：循环播放
• autoplay：自动播放，现代浏览器为了避免对用户造成骚扰，默认不支持自动播放

<audio src="音频地址" controls>
  您的浏览器不支持audio标签，请升级浏览器
</audio>

2. 视频标签

在网页中插入视频需要使用video标签，兼容到IE9

• src：（必填）音频地址，常用音频格式mp4
• width：宽度
• height：高度
• controls：是否显示控制按钮
• loop：循环播放
• autoplay：自动播放，现代浏览器为了避免对用户造成骚扰，默认不支持自动播放

<video src="视频地址" controls>
  您的浏览器不支持video标签，请升级浏览器
</video>

四、HTML5新增区块标签

五、语义化标签

1. 文本“区块”标签

<span> 标签，本身没有特殊的显示效果，可以结合CSS来丰富样式

2. <b>、<u>、<i>标签，可用CSS替代其功能

<!-- 请复制以下代码，在浏览器运行查看效果 -->
<b>这是一段加粗的文字</b>
<u>这是一段加下划线的文字</u>
<i>这是一段倾斜的文字</i>

3. <strong>、<em>、<mark>标签，标识语义强调

<!-- 请复制以下代码，在浏览器运行查看效果 -->
<strong>特别重要的文字</strong>
<em>强调的文字</em>
<mark>这是一段需要高亮的文字</mark>